<!--Cell-购买的策略-->
<template>
  <div v-if="isShow">

    <div class="data bg2">

      <!--背景纹路-->
      <LImage :src="config.img('texture2.png')"></LImage>

      <!--基础信息-->
      <div class="row acenter">
        <text class="font32 text1 name" @click="shopClick(item)">{{item.strategyName}}</text>
        <div class="code bg3">
          <text class="font22 text2">{{item.strategyCode}}</text>
        </div>
        <LImage class="up" :src="config.img('strategy_up_ button.png')" v-if="up" @click="upClick(item)"></LImage> 
        <div class="all"></div>
        <text :class="['font32', config.upDown(item.expectedAnnual)]">{{expectedAnnual}}</text>
      </div>

      <!--介绍-->
      <div class="row">
        <text class="text font24 text3">{{item.describe}}</text>
        <div class="all"></div>
        <text class="font24 text3">{{T('预期年化')}}</text>
      </div>
    </div>

    <!--底部-->
    <div class="bot bg3">
      <text class="font20 text3">{{timestamp}}</text>
      <div class="all"></div>
      <div class="but" @click="buyClick(item)">
        <text class="font24 main-t1">{{T('续费')}}</text>
      </div>
      <div class="but" @click="upClick(item)">
        <text class="font24 main-t1">{{T('启动')}}</text>
      </div>
    </div>


    <!--类型-->
    <div :class="['type', false == 'contract' ? 'type-hong' : '']">
      <text :class="['font22', false == 'contract' ? 'udRed-t1' : 'main-t1']">{{false == 'contract' ? T('合约') : T('币币')}}</text>
    </div>
  </div>
</template>

<script>

//功能
import navigator from "@/_js/navigator"; 
import math from "@/_js/math";
import config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  props:{
    item: JSON, //策略信息
  },
  
  data() {
    return {
      T:T,
      config:config,
      isShow:false,

      up:false, //turn可升级
      expectedAnnual:'', //预期年化
      timestamp:'', //到期时间
    };
  },

  mounted(){

    config.init(()=>{
      this.up = math.getNumber(this.item.version) < math.getNumber(this.item.shopVersion);
      this.expectedAnnual = math.addJia(this.item.expectedAnnual) + '%';
      this.timestamp = this.getTime(this.item.deadline) + '   ' + T('到期');
      this.isShow = true;
    },[config.OPT_UP_DOWN]);
  },

  methods:{
    
    //获取时间-年/月/日
    getTime(timestamp){

      var time = new Date(Number(timestamp));

      var year = time.getFullYear()

      var month = time.getMonth()+1
      month = month < 10 ? "0"+month : month;

      var day = time.getDate();
      day = day < 10 ? "0"+day : day;

      return year+"/"+month+"/"+day;
    },

    /********************************** 点击触发*/
    //商城策略详情
    shopClick(item){
      var param = {'strategyId':item.strategyId};
      navigator.open('', 'shop/ShopInfo', param);
    },

    //策略升级
    upClick(item){
      var param = {'strategyId':item.strategyId, 
                    'version':item.version};
      navigator.openNative('shopRaise',param);
    },

    //续费策略
    buyClick(item){
      var param = {'strategyId':item.strategyId, 
                   'isBuy':false};
      navigator.open('', 'shop/ShopBuy', param);
    },

    //启动策略
    upClick(item){
      var param = {'strategyId':item.strategyId, 
                   'strategyName':item.strategyName};
      var strategyName = T(item.strategyName);
      navigator.open(strategyName, 'up/SUpBuy', param);
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>

/*********************** 购买的策略*/
.data{
  flex-direction: column;
  justify-content: space-between;
  height: 200px;

  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 50px;

  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.name{
  max-width: 240px;
  text-overflow: ellipsis;
  lines: 1;
}
.code{
  flex-direction: row;
  align-items: center;
  height: 30px;
  padding-left: 12px;
  padding-right: 12px;

  margin-left: 6px;
}
.text{
  width: 380px;
  lines:1;
  text-overflow: ellipsis;
}
.up{
  width: 28px;
  height: 28px;
  margin-left: 12px;
}
.bot{
  flex-direction: row;
  align-items: center;
  height: 64px;
  padding-left: 50px;
  padding-right: 25px;

  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.but{
  flex-direction: row;
  align-items: center;

  height: 64px;
  padding-left: 25px;
  padding-right: 25px;
}

.type{
  position: absolute;
  flex-direction: row;
  align-items: center;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 8px;


  background-color: rgba(22, 119, 254, 0.1);

  top: 0;
  right: 0;
}
.type-hong{
  background-color: rgba(252, 97, 128, 0.1);
}
</style>
